<template>
    <div class="classify">

        <!-- 新增 -->
        <div>
            <el-button @click="addHandler" type="primary">新增</el-button>
        </div>

        <!-- 表格 -->
        <div>
            <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="编号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="分类名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="description"
                label="分类简介">
            </el-table-column>
            <el-table-column>
            </el-table-column>
            <el-table-column
                prop="no"
                label="序号"
                width='150'>
            </el-table-column>
            <el-table-column
                label="操作"
                width='200'>
                <template v-slot='scope'>
                    <el-tag @click="toDelete(scope.row)">删除 </el-tag>
                    <el-tag type="warning" @click="toEdit(scope.row)"> 修改</el-tag>
                </template>
            </el-table-column>
            </el-table>
        </div>

        
        <!-- 模态框 -->
        <el-dialog title="发布新栏目" :visible.sync="dialogFormVisible" width="80%">
        <el-form>
            <el-form-item label="分类名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="分类简介" :label-width="formLabelWidth">
                <el-input type='textarea' v-model="form.description" autocomplete="off"></el-input>
            </el-form-item>
                <el-form-item label="序号" :label-width="formLabelWidth">
                <el-input v-model="form.no" autocomplete="off"></el-input>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="toAdd">确 定</el-button>
        </div>
        </el-dialog>

    </div>
</template>



<script>
import axios from '@/http/axios'
import qs from 'qs'
export default {
    data(){
        return {
            tableData:[],
            categories:[],
            form:{},
            formLabelWidth:'120px',
            dialogFormVisible:false
        }
    },
    created(){
        this.findAllNews()
    },
    methods:{
        // 修改
        toEdit(item){
            // 显示模态框
            this.dialogFormVisible=true;
            // 将当前行的数据放入模态框
            this.form=JSON.parse(JSON.stringify(item));
        },
        // 删除
        toDelete(item){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                // 封装参数
                let obj = {
                    id:item.id
                }
                axios({
                    url:'http://121.199.29.84:8001/category/deleteById',
                    method:'get',
                    params:obj
                }).then((res)=>{
                    // console.log(res.data);
                    // this.findAllNews();
                })
                this.$notify({
                    title: '成功',
                    message:'删除成功',
                    type: 'success'
                    
                })
                this.findAllNews();
                }).catch(() => {
                this.$notify({
                    title: '成功',
                    message: '取消成功',
                    type: 'success'
                })          
            });
        },
        // 新增栏目
        toAdd(){
            // console.log(this.form);
            axios({
                url:'http://121.199.29.84:8001/category/saveOrUpdate',
                method:'post',
                data:qs.stringify(this.form),
                contentType:'application/x-www-form-urlencoded'
            }).then((res)=>{
                this.$notify({
                title: '成功',
                message: res.data.message,
                type: 'success'
                })
                this.findAllNews();
            })
            this.dialogFormVisible=false;
        },
        // 查询所有栏目
        findAllNews(){
            axios({
                url:'http://121.199.29.84:8001/category/findAll',
                method:'get'
            }).then((res)=>{
                // console.log(res.data.data);
                this.tableData = res.data.data;
            })
        },
        addHandler(){
            // 显示模态框
            this.dialogFormVisible=true;
            this.form = {};
        },
    }
}
</script>